<template>
  <a-modal
    title="新增字典"
    :width="400"
    :visible="modalVisibal"
    dialogClass="createFormStyle"
    @cancel="handleCancel"
    :destroyOnClose="true"
    :keyboard="false"
    :maskClosable="false"
    :closable="true"
    centered
  >
    <a-form-model
      :model="formData"
      :rules="rules"
      ref="formComp">
      <!-- 字典编码 -->
      <a-form-model-item :label="$t('DictionaryEncoding')" class="formItemForMargin" prop="dictCode">
        <a-input
          v-model.trim="formData.dictCode"
          :placeholder="$t('pleaseInput')+$t('DictionaryEncoding')"
          :maxLength="40"
        ></a-input>
      </a-form-model-item>
      <!-- 字典名称 -->
      <a-form-model-item :label="$t('DictionaryName')" class="formItemForMargin" prop="dictName">
        <a-input
          v-model.trim="formData.dictName"
          :placeholder="$t('pleaseInput')+$t('DictionaryName')"
          :maxLength="20"
        ></a-input>
      </a-form-model-item>
    </a-form-model>
    <template #footer>
      <slot name="footer">
        <a-button cancel @click="handleCancel">{{ $t('cancel') }}</a-button>
        <a-button type="primary" @click="handleOk">{{ $t('sure') }}</a-button>
      </slot>
    </template>
  </a-modal>
</template>
<script>
export default {
  data () {
    return {
      modalVisibal: false,
      formData: {
        dictCode: '',
        dictName: ''
      },
      rules: {
        dictName: [{ required: true, message: this.$t('pleaseInput') }],
        dictCode: [{ required: true, message: this.$t('pleaseInput') }]
      }
    }
  },
  methods: {
    // 显示隐藏
    switchVisible () {
      this.modalVisibal = !this.modalVisibal
    },
    // 对话框点击保存
    handleOk () {
      this.$refs.formComp.validate((valid) => {
        if (!valid) {
          return
        }
        const requestParameters = {
          code: this.formData.dictCode,
          name: this.formData.dictName
        }
        console.log(requestParameters)
        console.log('requestParameters')
        this.$api.addDict(requestParameters).then(() => {
          this.$message.success(this.$t('successfullyOperation'))
          this.modalVisibal = false
          this.resetData()
          this.$emit('refreshDictCode')
        })
      })
    },
    // 对话框点击取消
    handleCancel () {
      this.modalVisibal = false
      this.resetData()
    },
    // 清理参数
    resetData () {
      this.formData.dictCode = ''
      this.formData.dictName = ''
    }
  }
}
</script>
<style lang="less" scoped>
.formWrap {
  margin-top: 20px;
  margin-bottom: 60px;
  .formItemForMargin {
    margin-bottom: 40px;
  }
}
</style>
